<template>
	<view class="container">
		<!-- 顶部导航 -->
		<view class="header">
			<view class="back-icon" @click="goBack">
				<u-icon name="arrow-left" size="30"></u-icon>
			</view>
			<view class="title">编辑收货地址</view>
			<view class="right-icon"></view>
		</view>
		
		<!-- 表单内容 -->
		<view class="form-container">
			<view class="form-item">
				<view class="form-label">联系人</view>
				<input class="form-input" type="text" v-model="addressForm.addressName" placeholder="收货人姓名" placeholder-class="placeholder" />
			</view>
			
			<view class="form-item">
				<view class="form-label">电话</view>
				<input class="form-input" type="number" v-model="addressForm.addressPhone" placeholder="收货人手机号码" placeholder-class="placeholder" maxlength="11" />
			</view>
			
			<view class="form-item">
				<view class="form-label">地址</view>
				<view class="form-input address-select" @click="chooseLocation">
					<text v-if="addressForm.addressInfo">{{addressForm.addressInfo}}</text>
					<text v-else class="placeholder">收货地址</text>
					<u-icon name="arrow-right" size="24" color="#999"></u-icon>
				</view>
			</view>
			
			<view class="form-item">
				<view class="form-label">小区</view>
				<input class="form-input" type="text" v-model="addressForm.addressCommunity" placeholder="收货小区" placeholder-class="placeholder" />
			</view>
			
			<view class="form-item switch-item">
				<view class="form-label">设为默认</view>
				<switch :checked="addressForm.addressDefault == 1" @change="switchChange" color="#67c23a" />
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit-btn-container">
			<button class="submit-btn" @click="saveAddress">提交</button>
		</view>
	</view>
</template>

<script>
import request from '@/util/request.js'

export default {
	data() {
		return {
			addressId: null,
			addressForm: {
				addressName: '',
				addressPhone: '',
				addressInfo: '',
				addressCommunity: '',
				addressDefault: false
			}
		}
	},
	onLoad(options) {
		// 直接用storage里的数据初始化表单
		const item = uni.getStorageSync('editAddress')
		if (item) {
			this.addressId = item.addressId
			this.addressForm = {
				addressName: item.addressName,
				addressPhone: item.addressPhone,
				addressInfo: item.addressInfo,
				addressCommunity: item.addressCommunity,
				userId: item.userId,
				addressDefault: item.addressDefault == 1 ? 1 : 0,
				addressStatus: item.addressStatus || 1
			}
		}
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		switchChange(e) {
			this.addressForm.addressDefault = e.detail.value ? 1 : 2
			// 注意：不需要在这里立即调用setDefault接口
			// 因为在提交表单时会一起处理默认地址的逻辑
			// 这样可以避免多次调用API导致的问题
		},
		chooseLocation() {
			// 调用地图选择位置API
			uni.chooseLocation({
				success: (res) => {
					console.log('选择地址成功：', res)
					this.addressForm.addressInfo = res.address
				},
				fail: (err) => {
					console.error('选择地址失败：', err)
				}
			})
		},
		async saveAddress() {
			// 表单验证
			if (!this.addressForm.addressName) {
				uni.showToast({
					title: '请输入收货人姓名',
					icon: 'none'
				})
				return
			}
			
			if (!this.addressForm.addressPhone) {
				uni.showToast({
					title: '请输入手机号码',
					icon: 'none'
				})
				return
			}
			
			if (!/^1\d{10}$/.test(this.addressForm.addressPhone)) {
				uni.showToast({
					title: '手机号码格式不正确',
					icon: 'none'
				})
				return
			}
			
			if (!this.addressForm.addressInfo) {
				uni.showToast({
					title: '请选择收货地址',
					icon: 'none'
				})
				return
			}
			
			// if (!this.addressForm.addressCommunity) {
			// 	uni.showToast({
			// 		title: '请输入小区名称',
			// 		icon: 'none'
			// 	})
			// 	return
			// }
			
			// 修改：调用后端接口
			try {
				const res = await request({
					url: '/user-service/address/update',
					method: 'PUT',
					data: {
						addressId: this.addressId,
						userId: this.addressForm.userId, 
						addressName: this.addressForm.addressName,
						addressPhone: this.addressForm.addressPhone,
						addressInfo: this.addressForm.addressInfo,
						addressCommunity: this.addressForm.addressCommunity,
						addressDefault: this.addressForm.addressDefault,
						addressStatus: this.addressForm.addressStatus || 1
					}
				})
				uni.showToast({
					title: res.message || '保存成功',
					icon: 'success',
					duration: 1500,
					success: () => {
						uni.$emit('refreshAddressList')
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
				})
			} catch (err) {
				// 错误提示已在request.js统一处理
			}
		}
	}
}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #f8f8f8;
}

.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
	padding: 0 30rpx;
	background-color: #ffffff;
	position: relative;
	
	.back-icon {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
	}
	
	.title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}
	
	.right-icon {
		width: 60rpx;
		height: 60rpx;
	}
}

.form-container {
	margin-top: 20rpx;
	background-color: #ffffff;
	padding: 0 30rpx;
}

.form-item {
	display: flex;
	align-items: center;
	min-height: 100rpx;
	border-bottom: 1rpx solid #f0f0f0;
	
	&:last-child {
		border-bottom: none;
	}
	
	.form-label {
		width: 160rpx;
		font-size: 28rpx;
		color: #333;
	}
	
	.form-input {
		flex: 1;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 28rpx;
		color: #333;
	}
	
	.placeholder {
		color: #999;
	}
	
	.address-select {
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.iconfont {
			color: #999;
			font-size: 24rpx;
		}
	}
	
	&.switch-item {
		justify-content: space-between;
	}
}

.submit-btn-container {
	padding: 40rpx 30rpx;
	
	.submit-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 32rpx;
		color: #ffffff;
		background-color: #67c23a;
		border-radius: 45rpx;
		margin-bottom: 30rpx;
	}
}
</style> 